<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>客户编辑</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/plugins/layui/css/membersEdit.css">
</head>
<body class="childrenBody">
<div class="container">
	<form class="layui-form">
		<div class="layui-form-item user-info">
			<input type="hidden" id="memberId" value="">
			<label class="layui-form-label">客户姓名</label>
			<div class="layui-input-block" style="width: 20%">
				<input type="text" class="layui-input"  name="name" lay-verify="required" disabled>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号码</label>
			<div class="layui-input-block"  style="width: 20%">
				<input type="text" class="layui-input" lay-verify="required||phone" name="phone" disabled>
			</div>
		</div>
		<hr/>
		<!--<label>车辆信息</label><button type="button" class="layui-btn layui-btn-xs layui-btn-success" onclick="addCarInfo()">添加车辆</button>-->
		<div class="add-car">
			<h3>车辆信息</h3>
			<span class="btn" onclick="addCarInfo()">添加车辆</span>
		</div>
		<br>

		<!--<div class="layui-form customer_car_list">-->
		<!--<table class="layui-table" id="customerCarList" lay-filter="customerCars"></table>-->
		<!--</div>-->
		<div class="table">
			<table class="layui-table" id="tab">
				<colgroup>
					<col width="150">
					<col width="400">
					<col>
				</colgroup>
				<thead>
				<tr>
					<th style="width:20%">车牌号码</th>
					<th style="width:20%">车辆型号</th>
					<th style="width:20%">车架号</th>
					<!--<th>选择型号</th>-->
					<th style="width:20%">操作</th>
				</tr>
				</thead>
				<tbody id="toMain">

				</tbody>
			</table>
		</div>
		<!--<div id="carInfoList" style="margin: 20px;">-->
		<!--</div>-->

		<!--		<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="editMember">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>-->
		<div id="box">
			<div id="head_list">
				<div class="active1">保单列表</div>
				<div>卡券列表</div>
				<div>服务记录</div>
			</div>
			<div id="menu_content">
				<div style="display:block;" class="item_">
					<table class="layui-table" id="tab1">
						<colgroup>
							<col width="250">
							<col width="300">
							<col>
						</colgroup>
						<thead>
						<tr>
							<th>保险公司</th>
							<th>保单号</th>
							<th>车牌号</th>
							<th>汽车品牌</th>
							<th>车架号</th>
							<th>礼包金额</th>
							<th>投保金额</th>
							<th>参保日期</th>
						</tr>
						</thead>
						<tbody id="toMain1">

						</tbody>
					</table>
				</div>
				<div style="display:none;" class="item_">
					<table class="layui-table" id="tab2">
						<colgroup>
							<col width="250">
							<col width="300">
							<col>
						</colgroup>
						<thead>
						<tr>
							<th>卡券编号</th>
							<th>卡券名称</th>
							<th>卡券金额</th>
							<th>核销状态</th>
							<th>核销日期</th>
						</tr>
						</thead>
						<tbody id="toMain2">

						</tbody>
					</table>
				</div>
				<div style="display:none;" class="item_">
					<table class="layui-table" id="tab3">
						<colgroup>
							<col width="250">
							<col width="300">
							<col>
						</colgroup>
						<thead>
						<tr>
							<th>车牌号</th>
							<th>车架号</th>
							<th>服务项目</th>
							<th>服务价格</th>
							<th>状态</th>
							<th>结算时间</th>
						</tr>
						</thead>
						<tbody id="toMain3">

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</form>
	<div class="item-info">
		<div class="item-content">
			<ul>
				<li>
					<p>车牌号码</p>
					<input type="text" value="" class="carnumber" name="plateNumber" placeholder="请输入车牌号码">
				</li>
				<li>
					<p>选择型号</p>
					<select name="brand" id="brand" class="carnumber"></select>
					<!--<input type="text" class="layui-input" lay-verify="required" name="model" placeholder="请输入车型" id="model">
					<input type="button" class="layui-btn layui-btn-xs selectModel" value="选择型号" data-id="'+modalNum+'"/>-->
				</li>
				<li>
					<p>车架号</p>
					<input type="text" value="" class="carnumber" name="frameNumber" placeholder="请输入车架号">
				</li>
				<li>
					<div class="return" onclick="returnBack()">返回</div>
					<div class="save">保存</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<!--一般情况下，一个业务页面引入一个layui.js和业务js这两个两个js就够了-->
<!-- <script type="text/javascript" src="../../../lib/layui/layui.js"></script> -->
<!-- <script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script> -->
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<!-- <script type="text/javascript" src="editMenu.js"></script> -->
<script type="text/javascript">
    /**
     * 返回
     * **/
    function returnBack(){
        var CarInfo = $(".item-info")[0];
        CarInfo.style.display = "none";
    }
    var modalNum=0;
    function setData(result){
        $("#model").val(result);
    }
    function getcar() {
        var array = new Array();
        $("div[name=car]").each(function () {
            var plateNumber=$(this).find("input[name='plateNumber']").val();
            var carDesc=$(this).find("input[name='model']").val();
            var temp = { plateNumber: "", carDesc:""};
            temp.plateNumber = plateNumber;
            temp.carDesc = carDesc;
            temp.id=$(this).attr("id");
            array.push(temp);
        });
        return array;
    }


    function getcustomer() {
        var customer = new Object();
        customer.id=$("#memberId").val();
        customer.name = $.trim($("input[name='name']").val());
        customer.phone = $.trim($("input[name='phone']").val());
        customer.customerCars = getcar();
        var json = JSON.stringify(customer);
        return json;
    }
    function addCarInfo(){
        var CarInfo = $(".item-info")[0];
        CarInfo.style.display = "block";
    }
    function tabSelect(){
        var head_list = document.getElementById("head_list");
        var menu_content = document.getElementById("menu_content");
        var oli = head_list.getElementsByTagName("div");//获取tab列表
        var odiv = menu_content.getElementsByClassName("item_");//获取tab内容列表
        for(var i=0 ; i<oli.length ; i++){
            oli[i].index = i;//定义index变量，以便让tab按钮和tab内容相互对应
            oli[i].onclick = function( ){//移除全部tab样式和tab内容
                for(var i =0; i < oli.length; i++){
                    oli[i].className = "";
                    odiv[i].style.display = "none";
                }
                this.className = "active1";//为当前tab添加样式
                odiv[this.index].style.display="block";//显示当前tab对应的内容
            }
        }
    }
    function init(globalMid){
        $("body").on('click',".selectModel",function(){
//	    	alert(123123);
            var modalNums=$(this).attr("data-id");
            layer.open({
                type: 2,
                skin: 'layui-layer-rim', //加上边框
                area: ['850px', '500px'], //宽高
                content: '/car/select_car.html?modalNum='+modalNums
            });
        })

        var emptyDataHtml='<div style="border: solid darkgray 1px;height: 50px;text-align: center;" id="emptyData">还没有车辆信息哦，请添加车辆 (∧_∧)</div>';
        $("body").on('click',".canCelUpdateCar",function(){
            modalNum--;
            $(this).parent().parent().parent().parent().remove();
            if($(".car").length==0){
                $("#carInfoList").append(emptyDataHtml);
            }
        })

        $("body").on('click',".delete",function(){
            var parentDiv=$(this).parent().parent();
            var id=parentDiv.attr("data-id");

            layer.confirm('确定要删除该车辆信息吗', function(index){

                layer.close(index);
                $.ajax({
                    type: "DELETE",
                    url:"/storeMemberCar/"+id,
                    success: function(data) {
                        if(data.code==2000){
                            parentDiv.remove();
                            top.layer.close(index);
                            top.layer.msg(data.msg);
                        }else{
                            top.layer.msg(data.msg);
                        }
                    }
                });
            });
        })

    }

    $(function(){
        tabSelect();
    })

    layui.config({
        base: '/js/admin/'
    }).extend({
        ajaxExtention: 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
        $tool: 'tool'
    }).use(['form', 'layer', 'jquery', 'ajaxExtention', '$tool','table'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery,
            $tool = layui.$tool,
            table =layui.table;
        var globalMid;
        var queryArgs = $tool.getQueryParam();//获取查询参数
        var id = queryArgs['id'];
        var tableIns=table.render({
            elem: '#customerCarList'
            ,url: '/customerCar/getCarsByCustomer2/'+id
            ,cols: [[
                {field:'id', title: 'ID',  sort: true, fixed: true}
                ,{field:'plateNumber', title: '车牌号码'}
                ,{field:'carDesc', title: '车辆信息'}
                ,{field:'frameNumber', title: '车架号'}
                ,{field:'createTime', title: '创建时间', templet:function(d){
                    if(d.createTime!=null){
                        return $tool.formatTime(d.createTime);
                    }else{
                        return "---"
                    }
                }
                },{fixed: 'right',title: '操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            ,id: 'testReload',
            page:true
            ,height: 100
        });
        initUserInfo();
        init(globalMid);
        $.ajax({
            type : "GET",
            url: '/carBrands/GetAllBrands',
            dataType:'json',
            async:false,
            success: function(data){
                var list=data.data;
                var html='';
                for(var i=0;i<list.length;i++){
                    html += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
                }
                $("#brand").append(html);
                form.render();
            }
        });
        /**
         * 初始化用户信息
         * */
        function initUserInfo() {
            var queryArgs = $tool.getQueryParam();//获取查询参数
            var id = queryArgs['id'];
            var merchantId = queryArgs['mid'];

            globalMid=merchantId;
            var url = '/storeMember/'+id;
            $.ajax({
                url:url,
                method:"GET",
                //   dataType:'json',
                success:function (data) {
                    var datas = data.data;
                    $("input[name='name']").val(datas.name);
                    $("input[name='phone']").val(datas.phone);
                    $("#memberId").val(datas.id);
                    var memberCars=datas.storeMemberCars;
                    var html='';
                    if(memberCars.length>0){
                        for(var i=0;i<memberCars.length;i++){
                            var trow = AddTr(memberCars[i]);
                            $("#toMain").append(trow);
                        }
                        $("#carInfoList").append(html);

                    }else{
                        var emptyDataHtml='<div style="border: solid darkgray 1px;height: 50px;text-align: center;" id="emptyData">还没有车辆信息哦，请添加车辆 (∧_∧)</div>';
                        $("#carInfoList").append(emptyDataHtml);
                    }
                    form.render();//重新绘制表单，让修改生效
                }
            });



            $(".save").click(function(){

                var parentDiv=$(this).parent().parent().parent().parent();
                var id=parentDiv.attr("id");
                var plateNumber=parentDiv.find("input[name='plateNumber']").val();
                //var model=parentDiv.find("input[name='model']").val();
               var model= $("#brand").find("option:selected").text();
                var frameNumber=parentDiv.find("input[name='frameNumber']").val();
                var smCar=new Object;
                smCar.id=id;
                smCar.plateNumber=plateNumber;
                smCar.frameNumber=frameNumber;
                smCar.carInfo=model;
                smCar.storeMemberId=$("#memberId").val();
                // smCar.merchantId= globalMid;
                $.ajax({
                    type: "POST",
                    url:"/storeMemberCar",
                    data:JSON.stringify(smCar),
                    contentType:"application/json",
                    success: function(data) {
                        if(data.code==2000){
                            var CarInfo = $(".item-info")[0];
                            CarInfo.style.display = "none";
                            initCustomerCar();
                            top.layer.msg(data.msg);

                        }else{
                            top.layer.msg(data.msg);
                        }
                    }
                });
            })
            function initCustomerCar(){
                $("#toMain").empty();
                var url = '/storeMemberCar/getCarsByStoreMember/'+id;
                $.ajax({
                    url:url,
                    method:"GET",
                    success:function (data) {
                        var datas = data.data;
                        if(datas.length>0){
                            for(var i=0;i<datas.length;i++){
                                var trow = AddTr(datas[i]);
                                $("#toMain").append(trow);
                            }
                        }else{
                            var html = "<div style='width:1650px;min-width:1200px;text-align: center;float:left;line-height: 50px;'>无更多数据</div>"
                            $("#toMain").html(html)
                        }
                    }
                });
			}
            /**
             * 获取保单信息
             * **/
            var url = '/policys/getListByCustomerId/'+id;
            $.ajax({
                url:url,
                method:"GET",
                //   dataType:'json',
                success:function (data) {
                    var datas = data.data;
                    if(datas.length>0){
                        for(var i=0;i<datas.length;i++){
                            datas[i].createTime = $tool.formatTime(datas[i].createTime);
                            var trow = Addpolicy(datas[i]);
                            $("#toMain1").append(trow);
                        }
                    }else{
                        var html = "<div style='width:1650px;min-width:1200px;text-align: center;float:left;line-height: 50px;'>无更多数据</div>"
                        $("#tab1").after(html)
                    }
                }
            });
            /**
             *卡卷列表
             * **/
            var url = '/cards/getListByCustomerId/'+id;
            $.ajax({
                url:url,
                method:"GET",
                //   dataType:'json',
                success:function (data) {
                    var datas = data.data;
                    if(datas.length>0){
                        for(var i=0;i<datas.length;i++){
                            if(datas[i].riteoffDate !=null){
                                datas[i].riteoffDate = $tool.formatTime(datas[i].riteoffDate);
                            }else{
                                datas[i].riteoffDate = null
                            }
                            datas[i].status = datas[i].status == "1" ? "已核销" : "未核销";
//                        datas[i].verifyBeginDate = $tool.formatTime(datas[i].verifyBeginDate);
                            var trow = CardVolume(datas[i]);
                            $("#toMain2").append(trow);
                        }
                    }else{
                        var html = "<div style='width:1650px;min-width:1200px;text-align: center;float:left;line-height: 50px;'>无更多数据</div>"
                        $("#tab2").after(html)
                    }
                }
            });
            /**
             * 服务记录
             * **/
            var url = '/subscribe/getServiceListByCustomerId/'+id;
            $.ajax({
                url:url,
                method:"GET",
                //   dataType:'json',
                success:function (data) {
                    var datas = data.data;
                    if(datas.length>0){
                        for(var i=0;i<datas.length;i++){
                            datas[i].subscribeTime = $tool.formatTime(datas[i].subscribeTime);
                            var trow = Service(datas[i]);
                            $("#toMain3").append(trow);
                        }
                    }else{
                        var html = "<div style='width:1650px;min-width:1200px;text-align: center;float:left;line-height: 50px;'>无更多数据</div>"
                        $("#tab3").after(html)
                    }
                }
            });
        }
        /*
        动态添加表单数据
        * */
        function AddTr(h){
            var row = document.createElement('tr'); //创建行
			row.setAttribute("data-id",h.id);
           /* var idCell = document.createElement('td'); //创建第一列id
            idCell.innerHTML = h.id; //填充数据
            row.appendChild(idCell); //加入行  ，下面类似*/

            var carNumCell = document.createElement('td');//创建第二列name
            carNumCell.innerHTML = h.plateNumber;
            row.appendChild(carNumCell);

            var nameCell = document.createElement('td');//创建第二列name
            nameCell.innerHTML = h.carInfo;
            row.appendChild(nameCell);

            var frameNumCell = document.createElement('td');//创建第二列name
            frameNumCell.innerHTML = h.frameNumber;
            row.appendChild(frameNumCell);
            //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮
            var delCell = document.createElement('td');//创建第四列，操作列
            row.appendChild(delCell);
            var btnDel = document.createElement('input'); //创建一个input控件
            btnDel.setAttribute('type','button'); //type="button"
            btnDel.setAttribute('value','删除');
            btnDel.className = "layui-btn layui-btn-xs layui-btn-danger delete";
            var btnSave = document.createElement('input'); //创建一个input控件
            btnSave.setAttribute('type','button'); //type="button"
            btnSave.setAttribute('value','修改');
            btnSave.className = "layui-btn layui-btn-xs layui-btn-danger Save";
            //删除操作
            delCell.appendChild(btnDel);  //把删除按钮加入td，别忘了
            return row; //返回tr数据
        }
        /**
         * 保单列表
         **/
        function Addpolicy(h){
            var row = document.createElement('tr');
            var companyType = document.createElement('td');
            companyType.innerHTML = h.companyType;
            row.appendChild(companyType);
            var code = document.createElement('td');
            code.innerHTML = h.code;
            row.appendChild(code);
            var carInfo = document.createElement('td');
            carInfo.innerHTML = h.plateNumber;
            row.appendChild(carInfo);
            var nameCell = document.createElement('td');
            nameCell.innerHTML = h.carInfo;
            row.appendChild(nameCell);
            var frameCell = document.createElement('td');
            frameCell.innerHTML = h.frameNumber;
            row.appendChild(frameCell);

            var policyMoney = document.createElement('td');
            policyMoney.innerHTML = h.policyMoney;
            row.appendChild(policyMoney);
            var returnMoney = document.createElement('td');
            returnMoney.innerHTML = h.returnMoney;
            row.appendChild(returnMoney);
            var createTime = document.createElement('td');
            createTime.innerHTML = h.createTime;
            row.appendChild(createTime);
            return row;
        }
        /**
         *卡卷列表
         * **/
        function CardVolume(h) {
            var row = document.createElement('tr');
            var cardCode = document.createElement('td');
            cardCode.innerHTML = h.cardCode;
            row.appendChild(cardCode);
            var cardTitle = document.createElement('td');
            cardTitle.innerHTML = h.cardTitle;
            row.appendChild(cardTitle);
            var cardAmount = document.createElement('td');
            cardAmount.innerHTML = h.cardAmount;
            row.appendChild(cardAmount);
            var status = document.createElement('td');
            status.innerHTML = h.status;
            row.appendChild(status);
            var riteoffDate = document.createElement('td');
            riteoffDate.innerHTML = h.riteoffDate;
            row.appendChild(riteoffDate);
            return row;
        }
        /**
         *服务列表
         * **/
        function Service(h) {
            var row = document.createElement('tr');
            var carNum = document.createElement('td');
            carNum.innerHTML = h.carNum;
            row.appendChild(carNum);

            var frameNum = document.createElement('td');
            frameNum.innerHTML = h.frameNum;
            row.appendChild(frameNum);

            var customerCarDesc = document.createElement('td');
            customerCarDesc.innerHTML = h.customerCarDesc;
            row.appendChild(customerCarDesc);
            var cardAmount = document.createElement('td');
            cardAmount.innerHTML = h.price==null?'0':h.price;
            row.appendChild(cardAmount);
            var subscribeStatus = document.createElement('td');
            subscribeStatus.innerHTML = h.subscribeStatus==2?'已结算':'未结算';
            row.appendChild(subscribeStatus);
            var subscribeTime = document.createElement('td');
            subscribeTime.innerHTML = h.subscribeTime;
            row.appendChild(subscribeTime);
            return row;
        }
    });

</script>
</body>
</html>

